<template>
    <div>
        <common-banner name="产品中心" en-name="Products Center"></common-banner>
        <div class="page-center">
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right" class="mt-20 mb-20">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>产品中心</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="mt-100 mb-100">
                <div class="products-container">
                    <div class="content">
                        <a href="/synthesis" class="image-container"><img src="../assets/imgs/8fo2.jpg" alt="" /></a>
                        <p>定制合成</p>
                    </div>
                    <div class="content">
                        <a href="/stock" class="image-container"><img src="../assets/imgs/updj.jpg" alt="" /></a>
                        <p>库存现货</p>
                    </div>
                    <div class="content">
                        <a href="/brand" class="image-container"><img src="../assets/imgs/kzgi.jpg" alt="" /></a>
                        <p>代理品牌</p>
                    </div>
                    <div class="content mt-40">
                        <a href="/standards" class="image-container"><img src="../assets/imgs/pfe9.jpg" alt="" /></a>
                        <p>食品环境标准品</p>
                    </div>
                    <div class="mt-40 content-text">
                        <p>丰富的库存，是您效率的保障</p>
                        <p>丰富的一线品牌代理，是您个性化需求的满足</p>
                        <p>专业的定制合成，是您难题的解决方案</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import CommonBanner from '@/components/CommonBanner.vue'
document.title = `产品中心 ${document.title}`
</script>
<style lang="scss" scoped>
.products-container {
    margin: 60px 100px;
    display: flex;
    gap: 60px;
    flex-wrap: wrap;

    .content {
        border-radius: 50px;
        width: 286px;
        height: 214px;

        p {
            text-align: center;
            font-size: 18px;
            margin-top: 20px;
        }
    }

    .image-container {
        display: block;
        overflow: hidden;
        width: 286px;
        height: 214px;

        img {
            object-fit: cover;
            border-radius: 50px;
        }
    }

    .content-text {
        flex-grow: 2;
        text-align: center;
        color: #666;
        font-size: 20px;
        p {
            line-height: 60px;
        }
    }
}

// 兼容移动端
@media (max-width: 768px) {
    .page-center {
        width: auto !important;
    }
    .breadcrumb {
        margin-left: 10px;
    }

    .products-container {
        margin: 0 16px !important;
        display: block !important;
        gap: 60px;
        flex-wrap: wrap;
        text-align: center !important;

        .content {
            border-radius: 50px;
            width: 100%;
            height: auto;

            p {
                text-align: center;
                font-size: 18px;
                margin-top: 20px;
            }
        }

        .image-container {
            display: block;
            overflow: hidden;
            width: 100%;
            height: auto;

            img {
                object-fit: cover;
                border-radius: 50px;
            }
        }

        .content-text {
            flex-grow: 2;
            text-align: center;
            color: #666;
            font-size: 20px;
            p {
                line-height: 60px;
            }
        }
    }

    .mt-100 {
        margin-top: 50px !important;
    }
}
</style>
